<template>
  <div class="promoteManage">
    <div class="queryForm">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="用户名">
          <a-input v-model="queryForm.username" placeholder="请输入用户名" allow-clear/>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="queryData" :loading="loading">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table :columns="columns" :data-source="tableData" :loading="tableLoading" :pagination="pagination"
             @change="pageChange" :rowKey="rowKey">
      <template slot="username" slot-scope="text, record">
        <a href="javascript:;" @click="showGroup(record)">{{ text }}</a>
      </template>
    </a-table>
    <div ref="modalHtml">
      <a-modal v-model="visible" :title="title" :footer="null" width="70%" :getContainer="() => $refs.modalHtml">
        <tree-charts :showGroupData="showGroupData"></tree-charts>
      </a-modal>
    </div>
  </div>
</template>

<script>
  import {
    getInviteRecordList,
    getInviteUsers
  } from '../../serves';
  import TreeCharts from './treeChart.vue';

  const columns = [{
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    ellipsis: true
  },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true,
      scopedSlots: {
        customRender: 'username'
      }
    },
    {
      title: '邀请数',
      dataIndex: 'num',
      key: 'num',
      ellipsis: true
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    }
  ];
  export default {
    name: 'PromoteManage',
    components: {
      TreeCharts
    },
    data() {
      return {
        columns,
        tableLoading: false,
        tableData: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50']
        },
        lastPageSize: 10,
        title: '推广关系',
        visible: false,
        showGroupData: '',
        queryForm: {
          username: ''
        },
        loading: false
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      showGroup(val) {
        this.visible = true;
        setTimeout(() => {
          this.showGroupData = val.id;
        }, 1000);
      },
      rowKey(record, index) {
        return index;
      },
      queryData() {
        this.loading = true
        this.handleQuery()
      },
      handleQuery() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          username: this.queryForm.username
        };
        this.tableLoading = true;
        getInviteRecordList(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.tableData = res.data.data.records;
            this.pagination.total = res.data.data.total;
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
          this.tableLoading = false;
          this.loading = false
        });
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize;
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1;
          this.lastPageSize = val.pageSize;
        } else {
          this.pagination.current = val.current;
        }
        this.handleQuery();
      }
    }
  };
</script>

<style lang="scss">
  .promoteManage {

    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 10px;
    }
  }
</style>
